<template>
	<view>
		<view class="Dahe" v-if="findindex+1<list.length">
			<view class="tiMu"><span class='qiAn'>{{list[findindex].leiXin}}</span>{{list[findindex].Timu}}</view>
			<button :class="index==sixindex?'is':''" v-for="(item,index) in list[findindex].xIangone"
				@click="tiaozhuan(index)">{{item}}</button>
			<view class="biaoQian">{{findindex+1}}/{{list.length}}</view>
			<view class="wuJiao">
				<view class="leftone">
					<view class="time">{{fenzhong}}:{{miaoshu>=10?miaoshu:'0'+miaoshu}}</view>
				</view>
				<view class="rigthone">
					<button class="btnBox" type="primary" @click="xiaYiti()">下一题</button>

				</view>
			</view>
		</view>
		<view v-else>这是成绩页面</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				//这是判定收藏的布尔值
				ifage: false,
				//这个是判断背景颜色的最初下标
				sixindex: -1,
				list: [],
				//这个是当前的下标
				findindex: 0,
				daAn: [],
				//这个正确答案的数组
				arris: [],
				//这个是错误答案的数组
				arreoor: [],
				//这是定时器
				timer: null,
				//秒数
				miaoshu: 0,
				//分钟
				fenzhong: 50,
			}
		},
		onLoad(option) {
			console.log(option)
			uni.setNavigationBarTitle({
				title: option.name
			})
		},
		mounted() {
			this.getlist()
			//一个计时器每过一秒就调用一次
			this.timer = setInterval(this.time, 1000)

		},
		methods: {
			...mapMutations('school', ['upirteFunfid']),
			getlist() {
				console.log('tttt')
				uni.$http.get('/64647ed15bbac3001ab9f3a7/example/Timu').then((res) => {
					console.log('qingqiu ', res)
					this.list = res.data.data.list
					console.log('储存上去', this.list)
					console.log('这是list的长度', this.list.length)
				})

			},
			//这是时间的方法
			time() {
				if (this.miaoshu == 0) {
					this.miaoshu = 59
					this.fenzhong--
				} else {
					this.miaoshu--
				}

			},
			//收藏的方法
			onsrTir() {
				this.ifage = !this.ifage
				//找到当前下标

			},
			xiaYiti() {
				console.log(typeof this.ides)
				console.log('共享过来的', this.ides)
				//console.log('这是寻找的下标',add)
				if (this.ides == null) {
					uni.showModal({
						title: '提示',
						content: '请选择答案',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				} else {
					//这个是改变类名
					this.sixindex = -1
					//这个是取到了总数据里面当前下标的选择数据
					var sonbox = this.list[this.findindex].zhengque
					//if是正确数组  else是错误数组
					if (this.ides === sonbox) {
						//console.log('这是重新添加的数组')
						this.arris = [...this.arris, this.ides]
						console.log('正确答案', this.arris)
					} else {
						this.arreoor = [...this.arreoor, this.ides]
						console.log('错误答案', this.arreoor)
					}
					console.log('这是新添加的数组', this.findindex)
					this.zhengTin()
				}
			},
			//这个是判定下标有无达到最后一题的方法
			zhengTin() {
				console.log(this.findindex)
				if (this.findindex + 1 < this.list.length) {
					this.findindex++

				} else {
					//定义一个布尔值值用来控制组件的显示隐藏
					console.log('没有题目咯')
				}
			},
			tiaozhuan(index) {
				console.log(index)
				console.log(this.list[this.findindex].xIangone[index])
				//这个是选择的选项
				var opict = this.list[this.findindex].xIangone[index]
				this.sixindex = index
				this.upirteFunfid(opict)
			}
		},
		computed: {
			...mapState('school', ['ides'])
		}
	}
</script>

<style lang="scss">
	.imgae {
		margin-top: 8px;
		width: 30px;
		height: 30px;
	}

	.isfre {
		background-color: yellow;
	}

	.qiAn {
		background-color: rgb(254, 232, 212);
		color: rgb(226, 169, 119);
		margin-left: 10px;
		margin-right: 10px;
	}

	button {
		width: 80%;
		margin-top: 30px;
		font-size: 14px;
	}

	.biaoQian {
		background-color: rgb(243, 243, 243);
		color: rgb(126, 126, 126);
		width: 70px;
		height: 20px;
		text-align: center;
		position: fixed;
		bottom: 10%;
		left: 300px;
	}

	.wuJiao {
		display: flex;
		width: 100%;
		border: 1px solid gray;
		background-color: whitesmoke;
		position: fixed;
		bottom: 0;
		height: 50px;
	}

	.leftone {
		width: 10%;
	}

	.rigthone {
		width: 80%;
	}

	.btnBox {
		margin-top: 6px;
		width: 330px;
	}

	.is {
		background-color: aqua;
	}
</style>